<template>
	<div>
		<van-field v-model="v_text_model" center clearable :label="componentModel.label" readonly>
			<template #button>
				<van-button size="mini" type="primary" @click="onClickHandler" v-show="!readonly">查询</van-button>
			</template>
		</van-field>
		<input type="hidden" v-model="v_value_model" />
		<van-popup v-model:show="previewDialogVisible" closeable :style="{ height: '100%',width:'100%' }"
			:lazy-render="false">
			<div v-for="item in attributeList" :key="item.attributeId" style="margin-top: 10px;">
				<div v-if="item.type=='list'">
					<van-field readonly clickable :label="item.label" v-model="item.value_label" @click="showPicker(item)" />
					<van-popup v-model:show="item.showPicker" position="bottom">
						<van-picker show-toolbar :columns="item.selectLabelList" @cancel="closePicker(item)" @confirm="onConfirm" />
					</van-popup>
				</div>
				<van-field v-model="item.value" v-else-if="item.type=='string'" :label="item.label" :placeholder="item.label"  :readonly="attributeReadonly"/>
				<van-field v-model="item.value" v-else-if="item.type=='number'" :label="item.label" :placeholder="item.label"  :readonly="attributeReadonly"/>	
			</div>
			<van-field v-if="lot==true" v-model="lotValue"  label="批次" placeholder="批次"/>
			<van-field v-if="serNo==true" v-model="serNoValue"  label="序列号" placeholder="序列号"/>
			<van-button type="primary" @click="onDataSave" size="small">确定</van-button>
		</van-popup>
	</div>
</template>

<script>
	import {
		sendComponentValueChangeRequest,
		sendComponentEventRequest
	} from '@/utils/requestUtils.js';
	import {
		getPageData
	} from '@/utils/pageUtils.js';
	import constants from '@/utils/constants.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "AttributeSetInstanceComponent",
		components: {
		},
		props: ["componentModel", "rowData"],
		data() {
			return {
				v_text_model: "",
				v_value_model: "",
				datamodel: {},
				visible: true,
				readonly: false,
				label: "",
				previewDialogVisible: false,
				attributeList: [],
				lotValue: "",
				serNoValue: "",
				lot: false,
				serNo: false,
				attributeReadonly: false
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		methods: {
			setProp(prop) {
				var dataModel = prop["options"];
				if (dataModel != undefined) {
					this.datamodel = dataModel;
				}
				for (var k in prop) {
					if (k == "value") {
						this.v_value_model = prop[k];
						var isExists = false;
						for (var i = 0; i < this.datamodel.length; i++) {
							if (this.datamodel[i].value == this.v_value_model) {
								this.v_text_model = this.datamodel[i].name;
								isExists = true;
								break;
							}
						}
						if (!isExists) {
							this.v_text_model = "";
						}
					} else if (k == "visible") {
						this.visible = prop[k];
					} else if (k == "readonly") {
						this.readonly = prop[k];
					} else if (k == "label") {
						this.label = prop[k];
					}
				}
			},
			onClickHandler() {
				if (this.readonly) {
					return;
				}
				var pageComponent = utils.getPageComponent(this);
				var pageCode = pageComponent.componentModel.code;
				if ("product_product_formview" == pageCode ||"mobile_product_product_formview"==pageCode) {
					var data = getPageData(pageComponent, this.children);
					var productAttributeSetId = data["product_attribute_set_id"];
					var productProductId = data["id"];
					if (productAttributeSetId == null) {
						return;
					}
				} else {
					this.attributeReadonly = true;
					data = getPageData(pageComponent, this.children);
					productProductId = data["product_product_id"];
					productAttributeSetId = "";
				}
				var that = this;
				this.axios.get(constants.ROOT_URL + "attributesetinstance/init?pageCode=" +
						pageComponent.componentModel.code + "&productAttributeSetId=" + productAttributeSetId +
						"&productProductId=" + productProductId + "&productAttributeSetInstanceId=" + this.getValue())
					.then(
						function(response) {
							if (response.data.code == 1) {
								var attributeList= response.data.attributeDTOList;
								for(var i=0;i<attributeList.length;i++){
									if(attributeList[i].type=="list"){
										var optionList=attributeList[i].optionList;
										attributeList[i].selectLabelList=[];
										for(var j=0;j<optionList.length;j++){
											attributeList[i].selectLabelList.push(optionList[j].name);
											if(attributeList[i].value==optionList[j].value){
												attributeList[i].value_label=optionList[j].name;
											}
										}
									}
								}
								that.attributeList = attributeList;
								that.lot = response.data.lot;
								that.serNo = response.data.serNo;
								that.lotValue = response.data.lotValue;
								that.serNoValue = response.data.serNoValue;
							} else {
								that.$alert(response.data.message, '提示')
							}
						});

				this.previewDialogVisible = true;
			},
			searchCallback(value, name) {
				if (value == null) {
					this.v_value_model = "";
				} else {
					this.v_value_model = value;
				}
				this.v_text_model = name;
				if (this.scope != undefined) {
					this.$emit("onValueChange", this);
					return;
				}
				sendComponentValueChangeRequest(this);
			},
			setSelectedValue(value) {
				sendComponentEventRequest(this, "searchValueDisplayEvent", {
					"value": value
				});
			},
			getValue() {
				return this.v_value_model == null ? "" : this.v_value_model;
			},
			onDataSave() {
				var pageComponent = utils.getPageComponent(this);
				var pageCode = pageComponent.componentModel.code;
				if ("product_product_formview" == pageCode ||"mobile_product_product_formview" == pageCode) {
					var data = getPageData(pageComponent, this.children);
					var productAttributeSetId = data["product_attribute_set_id"];
					var productProductId = data["id"];
				} else {
					data = getPageData(pageComponent, this.children);
					productProductId = data["product_product_id"];
					productAttributeSetId = "";
				}
				var p = "";
				for (var i = 0; i < this.attributeList.length; i++) {
					if(this.attributeList[i].type=="list"){
						var optionList=this.attributeList[i].optionList;
						for(var j=0;j<optionList.length;j++){
							if(optionList[j].name==this.attributeList[i].value_label){
								this.attributeList[i].value=optionList[j].value;
								break;
							}
						}
					}
				}
				for (i = 0; i < this.attributeList.length; i++) {
					p += "&" + this.attributeList[i].attributeId + "=" + this.attributeList[i].value;
				}
				if (this.lot) {
					p += "&lotValue=" + this.lotValue;
				}
				if (this.serNo) {
					p += "&serNoValue=" + this.serNoValue;
				}
				var that = this;
				this.axios.post(constants.ROOT_URL + "attributesetinstance/dataSave?pageCode=" +
						pageComponent.componentModel.code + "&productAttributeSetId=" + productAttributeSetId +
						"&productProductId=" + productProductId + "&productAttributeSetInstanceId=" + this.getValue() + p)
					.then(
						function(response) {
							if (response.data.code == 1) {
								that.v_value_model = response.data.attributeSetInstanceId;
								that.v_text_model = response.data.description;
							} else {
								that.$alert(response.data.message, '提示')
							}
							that.previewDialogVisible = false;
						});
			},onConfirm(value) {
				for (var i = 0; i < this.attributeList.length; i++) {
					if(this.attributeList[i].type=="list" && this.attributeList[i].showPicker==true){
						var optionList=this.attributeList[i].optionList;
						for(var j=0;j<optionList.length;j++){
							if(optionList[j].name==value){
								this.attributeList[i].value=optionList[j].value;
								this.attributeList[i].value_label=value;
								this.attributeList[i].showPicker=false;
								break;
							}
						}
					}
				}
			},showPicker(item) {
				if (this.attributeReadonly) {
					return;
				}
				item.showPicker = true;
			},
			closePicker(item) {
				item.showPicker = false
			}
		},
	}
</script>

<style>
</style>
